<template>
    <div>
      <h3>门店增加</h3>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td >门店名称</td>
            <td><input type="text" v-model="queryInfo.ShopName" /></td>
          </tr>
          <tr>
            <td >门店电话</td>
            <td><input type="text" v-model="queryInfo.Phone"  maxlength="11"/></td>
          </tr>
          <tr>
            <td >门店地址</td>
            <td><input type="text" v-model="queryInfo.Adderss" /></td>
          </tr>
          <tr>
            <td >是否启用</td>
            <td>
              <input type="radio" name="use"v-model="queryInfo.State"   :value="1" />是
              <input   type="radio"  name="use"v-model="queryInfo.State":value="0"  />否
           
            </td>
          </tr>
          <tr>
            <td >门店图片</td>
            <td>
              <input type="file" @change="changeImg" />
              <img :src="queryInfo.Photo" width="100" height="100" />
            </td>
          </tr>
          <tr>
            <td ></td>
            <td><input type="button" value="添加" class="btn btn-success" @click="ok" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from 'axios';
  import { reactive } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  //向后端传递的数据
  let queryInfo = reactive({
    ShopName: '',
    Phone: '',
    Adderss: '',
    Photo: '',
    State: 1,
  });


  //1.上传图片
  const changeImg = (e: any) => {
    //将文件转成FormData格式
    var obj = e.target.files[0];
    var f = new FormData();
    f.append('file', obj);
    //发送网络请求完成上传
    axios({
      url: '/api/Commons/UpoadImgs',
      method: 'post',
      data: f,
    })
      .then((res) => {
        console.log(res);
        //上传成功   1.成功的图片地址存储  2.预览图片
        queryInfo.Photo = 'https://localhost:7291' + res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  };







  
  //2增加操作
  const ok = () => {
    //1.判断非空+有效性
    if (queryInfo.ShopName == '') {
      alert('门店名称不能为空');
      return;
    }



    if (queryInfo.Phone == '') {
      alert('门店电话不能为空');
      return;
    }
  
    if (queryInfo.Adderss == '') {
      alert('门店地址不能为空');
      return;
    }
  
    if (queryInfo.Photo == '') {
      alert('门店图片不能为空');
      return;
    }
    //2.发送网络请求完成填加操作
    axios({
      url: '/api/Shop/ShopAdd',
      method: 'post',
      data: queryInfo,
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('添加成功');
          router.push('/shopList');
        } else if (res.data == -1) {
          alert('门店名称重复');
          return;
        } else {
          alert('添加失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  

  </script>
  
  <style scoped></style>